import React, { memo, useEffect, useState } from 'react'
import RoomItem from '@/components/room-item/index'
import RoomList from './style'
import classNames from 'classnames'
import { RightOutlined } from 'antd'
import IconArrowRight from '@/assets/svg/icon-arrow-right'
import ScrollView from '@/base-ui/scroll-view/index'
import { useNavigate } from 'react-router-dom'
const index = memo((props) => {
    const {DiscountInfo} = props
    const [currentIndex,changeCurrentIndex] = useState(0);
    const [selectCity,changeSelectCity] = useState('');
    // 监视城市列表第一个，赋值给选中的city变量
    useEffect(()=>{
      const city = DiscountInfo.dest_list && Object.keys(DiscountInfo?.dest_list)[0];
      changeSelectCity(city);
    },[DiscountInfo])
    const changeIndex = (index,n)=>{
      changeCurrentIndex(index)
      changeSelectCity(n.name)
    }
    const navigate = useNavigate()
    const findMore = ()=>{
      navigate("/entire")
    }
  return (
    <RoomList>
      <div className="title">
      <h4>{DiscountInfo?.title}</h4>
      <h6>{DiscountInfo?.subtitle}</h6>
      <ScrollView>
      <ul className='dests'>
        {
          DiscountInfo?.dest_address?.map((n,index)=>{
            return (
              <li key={index}>
              <span 
              onClick={e=>changeIndex(index,n)}
              className={classNames('dest-item',{active:currentIndex === index})}>
              {n.name}
              </span>
            </li>
            )
          })
          
        }
      </ul>
      </ScrollView>


      </div>
      <ul className='content'>
      {
        DiscountInfo?.dest_list?.[selectCity]?.length && (DiscountInfo?.dest_list?.[selectCity]?.slice(0,8).map(n=>{
          return <RoomItem itemWidth="33.33" itemData={n} key={n.id}></RoomItem>
        }))
      }
    </ul>
    <div className='footer' onClick={findMore}>
      查看更多{ selectCity }&nbsp;<IconArrowRight />
    </div>
  </RoomList>
  )
})

index.defaultProps = {
  DiscountInfo:{}
}

export default index